<template>
  <div class="chartBox">
    <div id="yxin" class="item" />
    <div id="yzt" class="item" />
  </div>
  <height-chart ref="chartRef" />
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import heightChart from '@/components/custom/heightChart.vue'
import { getAssetTrend, getAssetCondition } from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'

const userStore = useUserStore()

const chartRef = ref(null)
const asset = ref({})

const props = defineProps({
  companyId: ''
})

onMounted(async() => {
  const res = await getAssetTrend({ companyId: props.companyId || null }) // userStore.userInfo.companyId
  asset.value = res.data
  await nextTick()
  const categories = []
  const values = []
  asset.value.forEach(item => {
    categories.push(item.createTime)
    values.push(item.areaTotal)
  })
  chartRef.value.createPillar('yzt', '土地资产趋势', categories, values)
  // chartRef.value.createPillar('yzt',['2023年1月','2023年6月','2023年12月'],[60, 89, 106])

  let total = 0
  const res2 = await getAssetCondition(props.companyId || null)
  if (res2.data && res2.data.areaTotal) {
    total = res2.data.areaTotal
  }
  chartRef.value.createAnnular('yxin', total + '亩', total)
})
</script>
<style lang="scss">
.chartBox{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    .item{
        flex: 1;
        &+.item{
            margin-left: 10px;
        }
    }
    .highcharts-data-label-connector{
        display: none;
    }
}

</style>
